<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../static/plugins/ruoyi/css/ry-ui.css" th:href="@{plugins/ruoyi/css/ry-ui.css}" rel="stylesheet" >
    <style>
        .col-6{
            width: 200px;
        }
    </style>


</head>
<body>
    <h3>登录</h3>
<!--    action="login" method="post"-->
    <form  id="form">
        <div>
            用户名：<input type="text" name="username" value="admin1">
        </div>
        <div>
            密码：<input type="text" name="password" value="admin@123">
        </div>
        <div>
            验证码：
            <input type="text" name="validateCode" class="code">
            <a href="javascript:void(0)" title="点击更换验证码">
                <img th:src="@{/captcha/captchaImage(type=math)}" alt="" class="imgcode">
            </a>
        </div>
        <div>

            <label ><input type="checkbox" name="rememberme">记住我</label>
        </div>
        <div>
<!--            <input type="submit" value="登录">-->
            <button id="btnSubmit" data-loading="正在验证登录，请稍候...">登录</button>
        </div>
    </form>
    <script src="../../static/js/commonJs/jquery.min.js" th:src="@{/js/commonJs/jquery.min.js}"></script>
    <script src="../../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
    <script src="../../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script src="../../static/plugins/ruoyi/js/ry-ui.js" th:src="@{/plugins/ruoyi/js/ry-ui.js}"></script>

    <script th:inline="javascript">
        var ctx = [[@{/}]];
    </script>
    <script type="application/javascript">
        $('.imgcode').click(function (){
            var url = ctx + 'captcha/captchaImage?type=math&s='+Math.random();
            $('.imgcode').attr('src',url);
        })

        validateCode()
        function validateCode(){
            $("#form").validate({
                rules:{
                    username: {
                        required: true
                    },
                    password: {
                        required: true
                    }
                },
                messages:{
                    username: {
                        required: "请输入您的用户名",
                    },
                    password: {
                        required: "请输入您的密码",
                    }
                },
                submitHandler:function (form){
                    login();
                }

            })
        }
        function login(){
            var username = $("input[name='username']").val()
            var password = $("input[name='password']").val()
            var validateCode = $("input[name='validateCode']").val()
            var rememberMe = $("input[name='rememberme']").is(':checked');
            console.log(username,password,validateCode,rememberMe);
            if($.common.isEmpty(validateCode)){
                $.modal.msg("请输入验证码");
                return false;
            }

            $.ajax({
                type:"post",
                url:ctx + "login",
                data:{
                    "username":username,
                    "password":password,
                    "validateCode":validateCode,
                    "rememberMe":rememberMe
                },
                // beforeSend:function(){
                //     $.modal.loading($("#btnSubmit").data("loading"));
                // },
                success:function (res){
                    console.log(res)
                    if(res.code == 0){
                        location.href = ctx + 'index';
                    }else{
                        $('.imgcode').click();
                        $(".code").val("");
                        $.modal.msg(res.msg);
                    }
                   // $.modal.closeLoading();


                }


            })
        }


    </script>

</body>
</html>